import { Component, Prop, Vue } from 'vue-property-decorator'
import ConfirmPopover from './ConfirmPopover'
import styles from './OperationCol.less'

@Component({})
export default class OperationCol extends Vue {
  @Prop({ default: [] }) private operations!: any[]
  @Prop({ default: 2 }) private showNum!: number
  @Prop({}) private row!: any
  @Prop({}) private index!: any
  @Prop({ default: false }) private isBlock!: boolean

  get topFour() {
    return this.operations.slice(0, this.showNum)
  }
  get remaining() {
    return this.operations.slice(this.showNum)
  }
  get arrLen() {
    return this.operations.length
  }
  get reminderCount() {
    return this.row.reminderCount
  }
  protected render(h: any) {
    return (
      <div class={{ [styles.operation]: true, 'operation-col': true }}>
        {this.topFour &&
          this.topFour.map((operation: any, index: number) => (
            <span
              key={index}
              style={{ display: this.isBlock ? 'block' : 'inline' }}
            >
              {operation.options ? (
                <el-dropdown trigger="click">
                  <el-button
                    disabled={operation.disabled}
                    type="text"
                    ref={`item${index}`}
                  >
                    {operation.text}
                    <i class="el-icon-arrow-down el-icon--right" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    {operation.options.map((option: any) => {
                      return (
                        <el-dropdown-item key={option.id}>
                          <el-button
                            type="text"
                            onClick={() => {
                              option.onClick(this.index, this.row)
                            }}
                          >
                            {option.text}
                          </el-button>
                        </el-dropdown-item>
                      )
                    })}
                  </el-dropdown-menu>
                </el-dropdown>
              ) : operation.isDelete ? (
                <ConfirmPopover
                  operation={operation}
                  onConfirm={() => {
                    this.operationClick(operation)
                  }}
                />
              ) : operation.isPopover ? (
                <el-popover
                  placement="bottom-end"
                  width="273"
                  trigger="hover"
                  onShow={() => {
                    this.operationHover(operation)
                  }}
                >
                  {operation.popoverContent(this.row)}
                  <el-button
                    disabled={operation.disabled}
                    type="text"
                    slot="reference"
                    ref={`item${index}`}
                  >
                    {operation.text}
                  </el-button>
                </el-popover>
              ) : !!operation.hoverTips ? (
                <el-tooltip placement="bottom-start">
                  <p slot="content" class="w216">
                    {operation.hoverTips}
                  </p>
                  <el-button
                    disabled={operation.disabled}
                    type="text"
                    ref={`item${index}`}
                    onClick={() => {
                      this.operationClick(operation)
                    }}
                  >
                    {operation.text}
                  </el-button>
                </el-tooltip>
              ) : (
                <el-button
                  disabled={operation.disabled}
                  type="text"
                  onClick={() => {
                    this.operationClick(operation)
                  }}
                  ref={`item${index}`}
                >
                  {operation.text}
                </el-button>
              )}
            </span>
          ))}
        {this.arrLen > this.showNum && (
          <el-popover
            popper-class="operation-col-popper"
            placement="top-start"
            trigger="hover"
          >
            {this.remaining &&
              this.remaining.map((operation: any, index: number) => (
                <span
                  key={index}
                  style={{ display: this.isBlock ? 'block' : 'inline' }}
                >
                  {operation.options ? (
                    <el-dropdown trigger="click" slot="reference">
                      <el-button
                        disabled={operation.disabled}
                        type="text"
                        ref={`item${index}`}
                      >
                        {operation.text}
                        <i class="el-icon-arrow-down el-icon--right" />
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        {operation.options.map((option: any) => {
                          return (
                            <el-dropdown-item
                              key={option.id}
                              onClick={() =>
                                option.onClick(this.index, this.row)
                              }
                            >
                              {option.text}
                            </el-dropdown-item>
                          )
                        })}
                      </el-dropdown-menu>
                    </el-dropdown>
                  ) : operation.isDelete ? (
                    <ConfirmPopover
                      operation={operation}
                      onConfirm={() => {
                        this.operationClick(operation)
                      }}
                    />
                  ) : operation.isPopover ? (
                    <el-popover
                      placement="bottom"
                      width="273"
                      trigger="hover"
                      onShow={() => {
                        this.operationHover(operation)
                      }}
                    >
                      {operation.popoverContent(this.row)}
                      <el-button
                        disabled={operation.disabled}
                        type="text"
                        slot="reference"
                        ref={`item${index}`}
                      >
                        {operation.text}
                      </el-button>
                    </el-popover>
                  ) : !!operation.hoverTips ? (
                    <el-tooltip placement="bottom-start">
                      <p slot="content">{operation.hoverTips}</p>
                      <el-button
                        type="text"
                        ref={`item${index}`}
                        disabled={operation.disabled}
                        onClick={() => {
                          this.operationClick(operation)
                        }}
                      >
                        {operation.text}
                      </el-button>
                    </el-tooltip>
                  ) : (
                    <el-button
                      type="text"
                      disabled={operation.disabled}
                      onClick={() => {
                        this.operationClick(operation)
                      }}
                      ref={`item${index}`}
                    >
                      {operation.text}
                    </el-button>
                  )}
                </span>
              ))}
            <i slot="reference" class="el-icon-more" />
          </el-popover>
        )}
      </div>
    )
  }
  private operationClick(operation: any) {
    operation.onClick(this.index, this.row, this)
  }
  private operationHover(operation: any) {
    operation.onHover(this.index, this.row, this)
  }
}
